<template>
  <div>
    <div ref="echart" style="width:50%;height:400px;"></div>

  </div>
</template>

<script>
export default {
  mounted() {
    this.createEcharts()
  },
  methods: {
    async createEcharts() {
      const res = await this.$http.get('/orderTotal')
      // console.log(res.data)
      if (res.data.status != 'success') {
        this.$message.error('服务器错误')
        return
      } else {
        //将返回的数据转为echars需要的数组数据 [{ value: 1048, name: 'SearchEngine' }],
        let echartData = res.data.result.map(item => {
          return { value: item.orderCounts, name: item._id }
        })
        //获取DOM容器
        const echartDom = this.$refs.echart
        if (echartDom) {
          //实例化echarts
          const myChart = this.$echarts.init(echartDom)
          //饼图配置信息option
          const option = {
            title: {
              text: '订单统计',
              subtext: '9个订单模块',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: '用户发单数量',
                type: 'pie',
                radius: '50%',
                data: echartData,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          //应用option配置
          myChart.setOption(option)
        }
      }
    }
  }
}
</script>
export default {
  mounted() {
    this.createEcharts()
  },
  methods: {
    createEcharts() {
      //获取DOM容器
      const echartDom = this.$refs.echart
      if (echartDom) {
        //实例化echarts
        const myChart = this.$echarts.init(echartDom)
        //饼图配置信息option
        const option = {
          title: {
            text: 'Referer of a Website',
            subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        //应用option配置
        myChart.setOption(option)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>